<template>
  <div id="app">
    <h1>Hello App!</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="首页" name="foo"></el-tab-pane>
      <el-tab-pane label="关于" name="bar"></el-tab-pane>
      <el-tab-pane label="用户" name="user"></el-tab-pane>
      <el-tab-pane label="档案" name="profile"></el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>


</template>
<style>

</style>
<script>

export default {
  name: "App",
  //创建
  created(){
    console.log("created");
    document.title = "首页"
  },
  //挂载
  mounted() {
    console.log("mouted");
  },
  //更新
  updated() {
    console.log("update");
  },
  data(){
    return {
      activeName: "foo",
      userId: "fz"
    }
  },
  methods: {
    handleClick(){
      if (this.activeName==="foo"){
        this.$router.push("/foo")
      }else if (this.activeName === "bar") {
       this.$router.push("/bar")
      }else if (this.activeName === "user"){
        this.$router.push({
          path: "/user",
          query: {
            userId: "fz"
          }
        })
      }else if (this.activeName === "profile") {
        this.$router.push({
          path: "/profile",
          query: {
            name: "fz",
            age: 18,
            height: 176
          }
        })
      }
    }
  }
};
</script>

